<template>
	<div class="mine">
		<div class="box">
			<div class="hearderBox">
				<div class="hearderBoxIcon" @click="goBack">
					<img src="../../assets/images/fanhuiTow.png" alt="">
				</div>
				<!-- {{$t('indexTitle.title34')}} -->
			</div>
			<div class="logoImg">
				<img src="https://logom.s3.ap-east-1.amazonaws.com/HKGAME.png" alt="" />
			</div>
			<div class="logoText">
				HK GAME
			</div>
			<a @click="downAPP('ios')">
				<svg width="20" height="24">
					<path
						d="M22,17.61c-.79,2.28-3.14,6.31-5.56,6.36-1.61,0-2.13-.95-4-.95s-2.41.92-3.93,1C6,24.1,2,18.17,2,13,2,8.26,5.31,5.9,8.2,5.86c1.55,0,3,1,4,1s2.72-1.29,4.59-1.11a5.65,5.65,0,0,1,4.39,2.38C17.4,10.62,18,15.73,22,17.61ZM16.78,0A5.31,5.31,0,0,0,12,5.53C14.58,5.73,17.09,2.81,16.78,0Z"
						transform="translate(-2)"></path>
				</svg>
				<div>
					{{$t('indexTitle.title309')}} | for iPhone
					<p>{{$t('indexTitle.title310')}} 12.0 {{$t('indexTitle.title311')}} | iOS 12.0 +</p>
				</div>
			</a>
			<a @click="downAPP('android')">
				<svg width="20" height="24">
					<path
						d="M6,8v9.44A1.56,1.56,0,0,0,7.56,19H8v3.54A1.51,1.51,0,0,0,9.51,24,1.48,1.48,0,0,0,11,22.54V19h2v3.54A1.51,1.51,0,0,0,14.51,24,1.48,1.48,0,0,0,16,22.54V19h.44A1.56,1.56,0,0,0,18,17.44V8ZM22,9.47a1.5,1.5,0,0,0-3,0v6.11a1.5,1.5,0,0,0,3,0Zm-17,0a1.5,1.5,0,0,0-3,0v6.11A1.46,1.46,0,0,0,3.5,17,1.46,1.46,0,0,0,5,15.58ZM15,2.16,15.89.3a.2.2,0,0,0-.16-.3.21.21,0,0,0-.17.1L14.61,2A6.18,6.18,0,0,0,9.39,2L8.44.1A.21.21,0,0,0,8.27,0a.2.2,0,0,0-.16.3l.94,1.86A5.33,5.33,0,0,0,6,7H18A5.33,5.33,0,0,0,15,2.16ZM9.5,5A.5.5,0,0,1,9,4.5.51.51,0,0,1,9.5,4a.5.5,0,0,1,.5.5A.5.5,0,0,1,9.5,5Zm5,0a.5.5,0,0,1-.5-.5.5.5,0,0,1,1,0A.5.5,0,0,1,14.5,5Z"
						transform="translate(-2 0)"></path>
				</svg>
				<div>
					{{$t('indexTitle.title312')}} | for Android
					<p>{{$t('indexTitle.title313')}} 6.0 {{$t('indexTitle.title311')}} | Android 6.0 +</p>
				</div>
			</a>
			<a @click="copyAPPUrl()">
				<svg width="24" height="24">
					<path
						d="M12,0.5C5.7,0.5,0.5,5.7,0.5,12S5.7,23.5,12,23.5S23.5,18.3,23.5,12S18.3,0.5,12,0.5z M12,21.6c-2.6,0-5-1.1-6.7-2.7v-1.6c0-0.5,0.2-0.7,0.4-1.1c0.2-0.3,0.5-0.7,0.5-1.3c0-0.9-0.8-1-1.3-1.1c-0.3,0-0.6-0.1-0.8-0.2c-0.1-0.1-0.3-0.4-0.4-0.6c-0.3-0.5-0.6-1.2-1.3-1.6c0.3-5,4.5-9,9.5-9c0.3,0,0.5,0,0.8,0c-0.1,0-0.1,0.1-0.2,0.1c-0.1,0.1-0.1,0.2-0.1,0.4c0,0.1,0.1,0.3,0.2,0.3c0.2,0.2,0.2,0.2,0.2,0.2c0,0-0.1,0.2-0.6,0.4c-0.8,0.4-1.7,1.2-1.9,2.1c-0.1,0.4,0.1,0.8,0.3,1c0.1,0.1,0.2,0.1,0.3,0.1c0.7,0,1.2-0.2,1.7-0.5c0.5-0.2,1-0.5,1.7-0.5c1.9,0,3.4,0.4,3.4,1c0,0.2-0.1,0.3-0.1,0.3c-0.2,0.2-1,0.2-1.7,0.2c-0.2,0-0.4,0-0.6,0c-0.6,0-0.9-0.1-1.1-0.2C14,7.4,13.7,7.2,13,7.2c-0.8,0-2.3,0.1-3.2,1.1C9,9.1,9,10,9.1,10.6c0,0.1,0,0.3,0,0.4c0,0.9,1,1.4,1.9,1.4c1.5,0,2.7,0.3,2.9,0.5c0,0.5,0.2,0.9,0.3,1.2c0.1,0.2,0.2,0.4,0.2,0.7c0,0.2,0,0.3-0.1,0.4c-0.2,0.2-0.3,0.5-0.3,1c0,1,1,2.1,1.1,2.2c0.1,0.1,0.2,0.2,0.4,0.2c0,0,0.1,0,0.1,0c0.3-0.1,2.8-0.8,2.8-2.4c0-0.5,0.2-0.6,0.4-0.9c0.2-0.2,0.6-0.5,0.6-1.1c0-0.4,0.7-1.4,1.3-2.1c0.1-0.1,0.1-0.2,0.1-0.4c0-0.1-0.1-0.3-0.2-0.3c-0.4-0.3-1.4-1.2-1.7-2.1c0.2,0.1,0.4,0.3,0.6,0.5c0.2,0.2,0.4,0.2,0.6,0.2c0.4,0,0.8-0.3,1.3-0.7c0.2,0.8,0.4,1.7,0.4,2.5C21.6,17.3,17.3,21.6,12,21.6z">
					</path>
				</svg>
				<div>{{$t('indexTitle.title314')}}
					<p>{{$t('indexTitle.title315')}} | click to copy URL</p>
				</div>
			</a>
			<div class="chrome-notice">
				<svg width="24" height="24">
					<path
						d="M2.897 4.181c2.43-2.828 5.763-4.181 9.072-4.181 4.288 0 8.535 2.273 10.717 6.554-2.722.001-6.984 0-9.293 0-1.674.001-2.755-.037-3.926.579-1.376.724-2.415 2.067-2.777 3.644l-3.793-6.596zm5.11 7.819c0 2.2 1.789 3.99 3.988 3.99s3.988-1.79 3.988-3.99-1.789-3.991-3.988-3.991-3.988 1.791-3.988 3.991zm5.536 5.223c-2.238.666-4.858-.073-6.293-2.549-1.095-1.891-3.989-6.933-5.305-9.225-1.33 2.04-1.945 4.294-1.945 6.507 0 5.448 3.726 10.65 9.673 11.818l3.87-6.551zm2.158-9.214c1.864 1.734 2.271 4.542 1.007 6.719-.951 1.641-3.988 6.766-5.46 9.248 7.189.443 12.752-5.36 12.752-11.972 0-1.313-.22-2.66-.69-3.995h-7.609z">
					</path>
				</svg>
				We recommend Chrome, or contact customer service if you have any problem.
			</div>
		</div>
		<loadingFour :msgText="msgTextTow" :isShowCloseBot="isShowCloseBot" v-if="isShowLoadingTeow" @closeGuanbiTow="closeGuanbi"></loadingFour>
	</div>
</template>

<script>
	import {
		getsystemconfig
	} from "../../utils/api.js"
	import loadingFour from '../../components/loadingFour.vue';
	export default {
		components: {
			loadingFour
		},
		data() {
			return {
				systemconfig: [],
				isLoadingShow: false,
				isShowCloseBot:false,
			}
		},
		created() {},
		mounted() {
			window.location.href.indexOf("?show") > -1 ? this.isLoadingShow = true : ''
			this.getSystemconfig()
		},
		methods: {
			closeGuanbi(e) {
				this.isShowLoadingTeow = false;
			},
			getSystemconfig() {
				getsystemconfig().then((res) => {
					if (res.status.errorCode == 0) {
						this.systemconfig = res.data
						console.log(this.systemconfig);
					} else if (res.status.errorCode == 401) {
						console.log('401')
					} else {
						// this.$message.error(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
						this.isShowCloseBot = false;
						setTimeout(() => {
							this.isShowLoadingTeow = false;
						}, 2000)
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			downAPP(url) {
				this.isLoadingShow = true
				if (url == 'ios') {
					var wyWindow = "";
					setTimeout(() => {
						wyWindow = window.open(location.href + '?show=1', "_blank");
						wyWindow.location = this.systemconfig.app_link_ios;
					}, 100);
					setTimeout(() => {
						this.isLoadingShow = false;
					}, 2000);
				} else if (url == 'android') {
					var wyWindowTow = "";
					setTimeout(() => {
						wyWindowTow = window.open(location.href + '?show=1', "_blank");
						wyWindowTow.location = this.systemconfig.app_link;
					}, 100);
					setTimeout(() => {
						this.isLoadingShow = false;
					}, 2000);
					// window.open(this.systemconfig.app_link)
				}
			},
			copyAPPUrl() {
				let url = 'http: //43.198.233.28:4821/#/index'
				let domInput = document.createElement('input');
				domInput.value = url;
				document.body.appendChild(domInput); // 添加input节点
				domInput.select(); // 选择对象;
				document.execCommand("Copy"); // 执行浏览器复制命令
				this.msgTextTow = this.$t('indexTitle.title100');
				this.isShowLoadingTeow = true;
				this.isShowCloseBot = true;
				setTimeout(() => {
					this.isShowLoadingTeow = false;
				}, 2000)
				// this.$message.success(this.$t('indexTitle.title100'));
				// this.$message({
				// 	showClose: true,
				// 	message: this.$t('indexTitle.title100'),
				// 	type: 'success'
				// });
				domInput.remove()
			},
			goBack() {
				this.$router.push('/index')
			}
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	.mine {
		height: 90vh;
		overflow-y: auto;
		overflow-x: hidden;
		padding-top: calc(constant(safe-area-inset-top) + 0px);
		padding-top: calc(env(safe-area-inset-top) + 0px);
		padding-bottom: calc(constant(safe-area-inset-bottom) + 85px);
		padding-bottom: calc(env(safe-area-inset-bottom) + 85px);
		box-sizing: border-box;
		position: fixed;
		z-index: 1;
		-webkit-overflow-scrolling: touch;
		width: 100%;
		background-color: #3d1b58;
	}

	.box {
		background-color: #3d1b58;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		/* min-height: 100vh; */
	}

	.hearderBox {
		width: 100%;
		height: 45px;
		background-color: #3d1b58;
		position: fixed;
		top: 0;
		font-weight: 300;
		line-height: 45px;
		text-align: center;
		font-size: 20px;
		color: #545658;
		/* box-shadow: inset 0 -1px 0 #ececec; */
		left: 0;
		overflow: hidden;
		z-index: 99;
	}

	.hearderBoxIcon {
		width: 50px;
		position: fixed;
		top: 3px;
		left: 0px;
	}

	.hearderBoxIcon img {
		width: 20px;
		height: 20px;
	}

	.logoImg {
		text-align: center;
		padding-top: 60px;
	}

	.logoImg img {
		width: 230px;
		height: 63px;
	}

	.logoText {
		font-size: 23px;
		color: #fff;
		text-align: center;
		font-size: 28px;
		font-weight: 300;
		/* text-shadow: 1px 1px 6px #575aa7; */
		margin: 6px auto 0px;
		font-weight: 400;
		-webkit-transform: skew(-3deg);
		-moz-transform: skew(-3deg);
		-ms-transform: skew(-3deg);
		-o-transform: skew(-3deg);
		transform: skew(-3deg);
	}

	a {
		color: #fff;
		font-weight: bold;
		text-decoration: none;
		width: 280px;
		height: auto;
		display: flex;
		align-items: center;
		padding: 10px 0;
		margin-top: 15px;
		cursor: pointer;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		background-color: transparent;
		border-radius: 60px;
		box-shadow: 0 0 0 1px #fff inset;
	}

	a svg {
		flex: 0 0 24px;
		margin-left: 20px;
	}

	path {
		fill: #fff;
	}

	a div {
		line-height: 22px;
		font-weight: 400;
		/* vertical-align: super; */
		margin-left: 10px;
	}

	a div p {
		font-size: 11px;
		margin: 0;
		font-weight: normal;
		white-space: nowrap;
	}

	.chrome-notice {
		text-align: center;
		opacity: 0.7;
		width: 100%;
		color: #fff8ad;
		font-size: 9px;
		line-height: 1.4;
		position: fixed;
		left: 0;
		bottom: 10vh;
		padding: 5px;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.2);
	}

	.chrome-notice svg {
		position: absolute;
		left: 0px;
		transform: scale(0.5);
		display: none;
	}
</style>